{% extends 'base/base.html' %}

{% block title %}{{ title }} - 多用户报警系统{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-center align-items-center mb-4">
                    {% if title == '创建用户' %}
                        <i class="fa fa-user-plus" aria-hidden="true" style="font-size: 2rem; color: #1677ff; margin-right: 10px;"></i>
                    {% else %}
                        <i class="fa fa-pencil" aria-hidden="true" style="font-size: 2rem; color: #1677ff; margin-right: 10px;"></i>
                    {% endif %}
                    <h3 class="text-center">{{ title }}</h3>
                </div>
            </div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}
                    
                    <!-- 用户名字段 -->
                    <div class="mb-3">
                        <label for="id_username" class="form-label">
                            <i class="fa fa-user-o" aria-hidden="true"></i> 用户名 <span class="text-danger">*</span>
                        </label>
                        {{ form.username }}
                        {% if form.username.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.username.errors %}
                                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                        <small class="form-text text-muted">
                            150个字符或更少。只能包含字母、数字和以下符号：@ . + - _
                        </small>
                    </div>
                    
                    <!-- 邮箱字段 -->
                    <div class="mb-3">
                        <label for="id_email" class="form-label">
                            <i class="fa fa-envelope-o" aria-hidden="true"></i> 邮箱
                        </label>
                        {{ form.email }}
                        {% if form.email.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.email.errors %}
                                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- 手机号字段 -->
                    <div class="mb-3">
                        <label for="id_phone" class="form-label">
                            <i class="fa fa-phone" aria-hidden="true"></i> 手机号
                        </label>
                        {{ form.phone }}
                        {% if form.phone.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.phone.errors %}
                                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- 角色字段 - 仅在超级管理员编辑用户时显示 -->
                    {% if form.role %}
                    <div class="mb-3">
                        <label for="id_role" class="form-label">
                            <i class="fa fa-shield" aria-hidden="true"></i> 角色 <span class="text-danger">*</span>
                        </label>
                        {{ form.role }}
                        {% if form.role.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.role.errors %}
                                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    {% endif %}
                    
                    <!-- 密码字段 - 创建用户时是必填，编辑时是可选 -->
                    {% if title == '创建用户' %}
                    <!-- 创建用户时的密码字段 -->
                    <div class="mb-3">
                        <label for="id_password1" class="form-label">
                            <i class="fa fa-lock" aria-hidden="true"></i> 密码 <span class="text-danger">*</span>
                        </label>
                        {{ form.password1 }}
                        {% if form.password1.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.password1.errors %}
                                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                        <small class="form-text text-muted">
                            您的密码不能与其他个人信息太相似。<br>
                            您的密码必须包含至少8个字符。<br>
                            您的密码不能是常用的密码。<br>
                            您的密码不能全部为数字。
                        </small>
                    </div>
                    <div class="mb-3">
                        <label for="id_password2" class="form-label">
                            <i class="fa fa-lock" aria-hidden="true"></i> 确认密码 <span class="text-danger">*</span>
                        </label>
                        {{ form.password2 }}
                        {% if form.password2.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.password2.errors %}
                                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                        <small class="form-text text-muted">
                            请再次输入密码进行确认
                        </small>
                    </div>
                    {% else %}
                    <!-- 编辑用户或个人资料时的密码字段 -->
                    <div class="mb-3">
                        <label for="id_password" class="form-label">
                            <i class="fa fa-lock" aria-hidden="true"></i> 新密码
                        </label>
                        {{ form.password }}
                        {% if form.password.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.password.errors %}
                                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                        <small class="form-text text-muted">
                            留空表示不修改密码<br>
                            密码必须包含至少8个字符
                        </small>
                    </div>
                    <div class="mb-3">
                        <label for="id_confirm_password" class="form-label">
                            <i class="fa fa-lock" aria-hidden="true"></i> 确认新密码
                        </label>
                        {{ form.confirm_password }}
                        {% if form.confirm_password.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.confirm_password.errors %}
                                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    {% endif %}
                    
                    <!-- 提交按钮 -->
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="fa fa-save" aria-hidden="true"></i> 保存
                        </button>
                        {% if title == '编辑个人资料' %}
                            <a href="{% url 'accounts:dashboard' %}" class="btn btn-secondary btn-lg">
                                <i class="fa fa-times" aria-hidden="true"></i> 取消
                            </a>
                        {% else %}
                            <a href="{% url 'accounts:user_list' %}" class="btn btn-secondary btn-lg">
                                <i class="fa fa-times" aria-hidden="true"></i> 取消
                            </a>
                        {% endif %}
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<script>
    // 添加页面加载动画效果
    document.addEventListener('DOMContentLoaded', function() {
        // 为表单元素添加焦点效果
        const formInputs = document.querySelectorAll('.form-control');
        formInputs.forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.classList.add('shadow-sm');
            });
            input.addEventListener('blur', function() {
                this.parentElement.classList.remove('shadow-sm');
            });
        });
        
        // 为密码字段添加密码强度检测
        function addPasswordStrengthChecker(inputId) {
            const passwordInput = document.getElementById(inputId);
            if (passwordInput) {
                passwordInput.addEventListener('input', function() {
                    const password = this.value;
                    let strength = 0;
                    
                    // 密码强度检测规则
                    if (password.length >= 8) strength++;
                    if (/[A-Z]/.test(password)) strength++;
                    if (/[a-z]/.test(password)) strength++;
                    if (/[0-9]/.test(password)) strength++;
                    if (/[^A-Za-z0-9]/.test(password)) strength++;
                    
                    // 显示密码强度指示
                    let strengthText = '';
                    let strengthColor = '';
                    
                    switch(strength) {
                        case 0: case 1:
                            strengthText = '弱';
                            strengthColor = 'text-danger';
                            break;
                        case 2: case 3:
                            strengthText = '中';
                            strengthColor = 'text-warning';
                            break;
                        case 4: case 5:
                            strengthText = '强';
                            strengthColor = 'text-success';
                            break;
                    }
                    
                    // 更新密码强度显示
                    let strengthIndicator = document.getElementById(`strength-${inputId}`);
                    if (!strengthIndicator) {
                        strengthIndicator = document.createElement('div');
                        strengthIndicator.id = `strength-${inputId}`;
                        passwordInput.parentNode.appendChild(strengthIndicator);
                    }
                    
                    strengthIndicator.className = 'mt-1';
                    strengthIndicator.innerHTML = password.length > 0 ? 
                        `<i class="fa fa-shield" aria-hidden="true"></i> 密码强度：<span class="${strengthColor}">${strengthText}</span>` : '';
                });
            }
        }
        
        // 为创建用户时的密码字段添加强度检测
        addPasswordStrengthChecker('id_password1');
        // 为编辑用户/个人资料时的密码字段添加强度检测
        addPasswordStrengthChecker('id_password');
    });
</script>
{% endblock %}